<template>
	<div>
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="handleGoodsDataClose"
			:dialogFooterBtn="true"
		>
			<div>
				<el-form label-width="100" ref="afterSaleOrderLogDialogFormRef" :model="state.ruleForm">
					<el-form-item label="回复内容" prop="content" :rules="{ required: true, message: '回复内容不能为空', trigger: 'blue' }">
						<el-input v-model="state.ruleForm.content" type="textarea" />
					</el-form-item>
					<el-form-item label="选择图片">
						<div class="goods-image-gallery" @click="choiceFileImage">
							<div class="goods-image img" v-for="(v, index) in state.ruleForm.images">
								<el-image :src="STATIC_URL + v" fit="cover" class="image" />
								<div class="delete-img" @click.stop="deleteImage(index)">
									<el-icon>
										<ele-Delete />
									</el-icon>
								</div>
							</div>
							<div class="goods-image">
								<el-icon>
									<ele-Plus />
								</el-icon>
							</div>
						</div>
					</el-form-item>
				</el-form>
			</div>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(afterSaleOrderLogDialogFormRef)" size="default">{{ state.dialog.submitTxt }} </el-button>
				</span>
			</template>
		</CustomDialog>
		<FileChoice ref="FileChoiceRef" @choice-file="choiceFileCallBack"></FileChoice>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, defineAsyncComponent } from 'vue';
import type { FormInstance, TabsPaneContext } from 'element-plus';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
import { orderApi } from '/@/api/shop/aftersale';
import messageUtils from '/@/utils/messageUtils';
import { STATIC_URL } from '/@/utils/config';

const FileChoiceRef = ref();
const afterSaleOrderLogDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		id: '' as string,
		content: '',
		images: [] as any,
	},

	dialog: {
		isShowDialog: false,
		type: '',
		title: '订单详情',
		submitTxt: '保存',
	},
});

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, errors) => {
		if (valid) {
			try {
				const data: any = await orderApi().createLog({
					afterSaleOrderId: state.ruleForm.id,
					content: state.ruleForm.content,
					images: state.ruleForm.images,
				});

				if (data.code === '0') {
					messageUtils().success('回复成功');
					handleGoodsDataClose();
				} else {
					messageUtils().error('操作失败，请稍后重试');
				}
			} catch (error) {
				messageUtils().error('操作失败，请稍后重试');
			}
		}
	});
};
const onCancel = () => {
	handleGoodsDataClose();
};
const handleGoodsDataClose = () => {
	state.dialog.isShowDialog = false;
	state.ruleForm.content = '';
	state.ruleForm.images = [];
};

const choiceFileImage = () => {
	FileChoiceRef.value.openFileChoiceDialog();
};

const deleteImage = (index: number) => {
	state.ruleForm.images.splice(index, 1);
};

const choiceFileCallBack = (cfi: ChoiceFileInfo[]) => {
	cfi.forEach((e) => {
		state.ruleForm.images.push(e.visitRelativePath);
	});
};
const onOpenDialog = (id: string) => {
	state.ruleForm.id = id;
	state.dialog.isShowDialog = true;
};

defineExpose({
	onOpenDialog,
});
</script>

<style scoped lang="scss">
.goods-image-gallery {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-flow: row;

	div {
		height: 50px;
		width: 50px;
	}
}

.img {
	.delete-img {
		display: none;
	}

	display: flex;
	flex-flow: column;
	position: relative;

	&:hover {
		.delete-img {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			width: 50px;
			left: 0px;
			bottom: 0px;
			height: 20px;
			background-color: var(--el-border-color-darker);
		}
	}
}

.goods-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 50px;
	cursor: pointer;
	border: 1px dashed var(--el-border-color-darker);
	&:hover {
		border: 1px dashed var(--el-color-primary);
	}
}
</style>
